import { ProFormSelect, ProFormText } from "@ant-design/pro-components";
import Card from "../Card";
import styles from "./index.module.less";
import { Row, Col } from "antd";
import CustomColLabel from "../CustomColLabel";
import { getShopsListApi } from "@/api/modules/merchant";
import { getProductCategoryList } from "@/api/modules/product";
import { map } from "lodash";
import { USE_RANGE_VALUE } from "../../../../discount/List/constant";

//正则表达式，替换字符串中的换行符号和表情；const emojiRegex = /[\u{1F600}-\u{1F64F}]/gu;

export default () => {
	return (
		<Card title="基础信息">
			<ProFormText
				label="商品标题"
				rules={[{ required: true, message: "请输入" }]}
				name="product_name"
				fieldProps={{
					showCount: true,
					maxLength: 50
				}}
				placeholder={"最多允许输入50个汉字"}
				// extra={<div>标题中请勿使用表情符号、换行符号。若填入表情符号、换行符号，系统将自动替换成空格</div>}
				extra={<div>标题中请勿使用表情符号、换行符号。</div>}
			/>
			<ProFormSelect
				label="所属店铺"
				name="shop_id"
				placeholder="请选择"
				rules={[{ required: true, message: "请选择" }]}
				fieldProps={{
					fieldNames: {
						label: "shop_name",
						value: "shop_id"
					}
				}}
				request={async () => {
					const res = await getShopsListApi({ keyword: "", shop_status: "" });
					return res?.data ?? [];
				}}
			/>
			<ProFormSelect
				label="所属类目"
				name="category_id"
				placeholder="请选择"
				rules={[{ required: true, message: "请选择" }]}
				request={async () => {
					const res = await getProductCategoryList();
					return (
						map(res?.data, (item: any) => {
							const preName =
								`${item.category_pid}` === USE_RANGE_VALUE.eat
									? "正食-"
									: `${item.category_pid}` === USE_RANGE_VALUE.gas
									? "正气生活-"
									: "";
							return {
								...item,
								label: `${preName}${item.category_name}`,
								value: item.category_id
							};
						}) ?? []
					);
				}}
			/>
			<Row>
				<CustomColLabel label="类目属性" />
				<Col span={20} className={styles.box}>
					<Row gutter={24}>
						<Col span={12}>
							<ProFormText
								labelCol={{ span: 6 }}
								name="product_origin_address"
								placeholder={"请输入"}
								label="产地"
								rules={[
									{ required: true, message: "请输入" },
									{ max: 40, message: "限制40个字符" }
								]}
							/>
						</Col>
						<Col span={12}>
							<ProFormText
								label="存储条件"
								name="product_storage_conditions"
								placeholder="请输入"
								labelCol={{ span: 6 }}
								rules={[
									{ required: true, message: "请输入" },
									{ max: 40, message: "限制40个字符" }
								]}
							/>
						</Col>
					</Row>
					{/* <Row gutter={24}>
						<Col span={12}>
							<ProFormSelect
								label="产地"
								name="a"
								labelCol={{ span: 6 }}
								placeholder="请选择"
								// rules={[{ required: true, message: "请选择" }]}
								options={[
									{ label: "产地1", value: "1" },
									{ label: "产地2", value: "2" }
								]}
							/>
						</Col>
						<Col span={12}>
							<ProFormSelect
								label="存储条件"
								name="c"
								placeholder="请选择"
								labelCol={{ span: 6 }}
								options={[
									{ label: "条件1", value: "1" },
									{ label: "条件2", value: "2" }
								]}
							/>
						</Col>
					</Row>
					<Row gutter={24}>
						<Col span={12}>
							<ProFormText labelCol={{ span: 6 }} name="dd" placeholder={"请输入"} label="品牌" />
						</Col>
						<Col span={12}>
							<ProFormSelect
								label="包装方式"
								name="rra"
								placeholder="请选择"
								labelCol={{ span: 6 }}
								// rules={[{ required: true, message: "请选择" }]}
								options={[
									{ label: "方式1", value: "1" },
									{ label: "方式2", value: "2" }
								]}
							/>
						</Col>
					</Row> */}
				</Col>
			</Row>
		</Card>
	);
};
